<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>IDMS-更懂你的宿舍助手</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="/static/assets/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">

    <!-- Fontello Icon -->
    <link rel="stylesheet" href="/static/assets/fonts/fontello/fontello.css">

    <!-- Dark Themes -->
    <link rel="stylesheet" href="/static/assets/styles/style-dark.min.css">

    <link rel="stylesheet" href="/static/assets/styles/extra.css">
</head>

<body>
<div class="main-menu">
    <header class="header">
        <a href="intime-moni.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>IDMS 智能宿舍监控系统</a>
        <button type="button" class="button-close fa fa-times js__menu_close"></button>
        <div class="user">
            <a href="#" class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""><span
                    class="status online"></span></a>
            <h5 class="name"><a href="profile.html">Denise Emily</a></h5>
            <h5 class="position">Administrator</h5>
            <!-- /.name -->
            <div class="control-wrap js__drop_down">
                <i class="fa fa-caret-down js__drop_down_button"></i>
                <div class="control-list">
                    <div class="control-item"><a href="profile.html"><i class="fa fa-user"></i> Profile</a></div>
                    <div class="control-item"><a href="#"><i class="fa fa-gear"></i> Settings</a></div>
                    <div class="control-item"><a href="#"><i class="fa fa-sign-out"></i> Log out</a></div>
                </div>
                <!-- /.control-list -->
            </div>
            <!-- /.control-wrap -->
        </div>
        <!-- /.user -->
    </header>
    <!-- /.header -->
    <div class="content">

        <div class="navigation">
            <h5 class="title">主要功能</h5>
            <!-- /.title -->
            <ul class="menu js__accordion">
				<!-- <li class="current">
					<a class="waves-effect" href="index.html"><i class="menu-icon mdi mdi-view-dashboard"></i><span>Dashboard</span></a>
				</li> -->
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-video"></i><span>宿舍监控</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/intimeMoni">实时监控</a></li>
						<li><a href="/backMoni">录像回放</a></li>
						<li><a href="/break/viewBreak">闯入记录</a></li>
						<li><a href="/potentialDanger">潜在危险警告</a></li>
					</ul>
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-lightbulb-outline"></i><span>智慧宿舍</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/memberSpacing">舍员空间</a></li>
						<li><a href="/waterElecMoni">水电管控</a></li>
						<li><a href="/roomService">寝室维修</a></li>
						<li><a href="/tempHumidityMoni">温湿监控</a></li>
					</ul>
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-account-settings-variant"></i><span>个人空间</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/personInfo">账号信息</a></li>
						<li><a href="/personBill">个人账单</a></li>
					</ul>
				</li>
			</ul>
            <!-- /.menu js__accordion -->
        </div>
        <!-- /.navigation -->
    </div>
    <!-- /.content -->
</div>
<!-- /.main-menu -->

<div class="fixed-navbar">
    <div class="pull-left">
        <button type="button"
                class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
        <h1 class="page-title">Home</h1>
        <!-- /.page-title -->
    </div>
    <!-- /.pull-left -->
    <div class="pull-right">
        <div class="ico-item">
            <a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
            <form action="#" id="searchform-header" class="searchform js__toggle"><input type="search"
                                                                                         placeholder="Search..."
                                                                                         class="input-search">
                <button class="mdi mdi-magnify button-search"
                        type="submit"></button>
            </form>
            <!-- /.searchform -->
        </div>
        <!-- /.ico-item -->
        <a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
        <a href="#" class="ico-item pulse"><span class="ico-item mdi mdi-bell notice-alarm js__toggle_open"
                                                 data-target="#notification-popup"></span></a>
        <a href="#" class="ico-item mdi mdi-logout js__logout"></a>
    </div>
    <!-- /.pull-right -->
</div>
<!-- /.fixed-navbar -->

<div id="notification-popup" class="notice-popup js__toggle" data-space="75">
    <h2 class="popup-title">Your Notifications</h2>
    <!-- /.popup-title -->
    <div class="content">

        <a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
    </div>
    <!-- /.content -->
</div>
<!-- /#notification-popup -->

<div id="message-popup" class="notice-popup js__toggle" data-space="75">
    <h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
    <!-- /.popup-title -->
    <div class="content">
        <ul class="notice-list">
            <li>
                <a href="#">
                    <span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
                    <span class="name">John Doe</span>
                    <span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere
							repellat voluptates.</span>
                    <span class="time">10 min</span>
                </a>
            </li>
        </ul>
        <!-- /.notice-list -->
        <a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
    </div>
    <!-- /.content -->
</div>
<!-- /#message-popup -->

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-md-3 col-xs-12 city-info">
                <div class="box-content bordered primary margin-bottom-20">
                    <div class="profile-avatar">
                        <img src="/static/assets/images/cs-logo.png" alt="">
                        <a href="#" class="btn btn-block btn-inbox"><i class="fa fa-exclamation-circle"></i>
                            了解更多关于--长沙</a>
                        <h3><strong><span class="member-temp">25 </span>℃</strong></h3>
                        <div class="member-weather"><i class="fa ico"></i> <span>晴</span></div>
                        <h4><span class="member-city">长沙</span>，
                            <span class="member-date"> 2021年5月15日 </span>
                        </h4>
                        <p>当前位置：<span class="member-position">湖南省 长沙市 天心区</p>
                    </div>
                    <!-- .profile-avatar -->
                    <table class="table table-hover no-margin member-now-weather">
                        <tbody>
                        <tr>
                            <td>空气质量</td>
                            <td>优</td>
                        </tr>
                        <tr>
                            <td>湿度</td>
                            <td>46%</td>
                        </tr>
                        <tr>
                            <td>风向</td>
                            <td>西南风 3级</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.box-content bordered -->

                <div class="box-content">
                    <h4 class="box-title"><i class="ico fa fa-users"></i>我的室友</h4>
                    <ul class="profile-friends-list list-inline">
                        <li><a href="#" class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></a></li>
                        <li><a href="#" class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></a></li>
                        <li><a href="#" class="avatar"><img src="/static/assets/images/avatar-3.jpg" alt=""></a></li>
                    </ul>
                </div>
                <!-- /.box-content -->
            </div>
            <!-- /.col-xs-12 -->
            <div class="col-md-9 col-xs-12 weather-info">
                <div class="col-xs-12">
                    <div class="box-content card">
                        <h4 class="box-title"><i class="fa fa-cloud ico"></i>天气预报</h4>
                        <!-- /.box-title -->
                        <div class="card-content">
                            <div class="pricing-plan">
                                <div class="pricing-table">
                                    <div class="col col-featured">
                                        <div class="thead bg-blue-1">
                                            <h4 class="weather-day"></h4>
                                            <div class="price">
                                                <span class="number"></span>
                                                <span class="small_number"></span>
                                                <div class="time">
                                                    <i class="ico"></i>
                                                    <span class="weather-type"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="thead">
                                            <h4 class="weather-day"></h4>
                                            <div class="price">
                                                <span class="number"> </span>
                                                <span class="small_number"></span>
                                                <div class="time">
                                                    <i class="ico"></i>
                                                    <span class="weather-type"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="thead">
                                            <h4 class="weather-day"></h4>
                                            <div class="price">
                                                <span class="number"></span>
                                                <span class="small_number"></span>
                                                <div class="time">
                                                    <i class="ico"></i>
                                                    <span class="weather-type"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="thead">
                                            <h4 class="weather-day"></h4>
                                            <div class="price">
                                                <span class="number"></span>
                                                <span class="small_number"></span>
                                                <div class="time">
                                                    <i class="ico"></i>
                                                    <span class="weather-type"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.card-content -->
                    </div>
                    <!-- /.box-content card -->
                </div>
                <div class="col-md-6 col-xs-12 dorm-news">
                    <div class="box-content card">
                        <h4 class="box-title"><i class="fa fa-file-text ico"></i> 宿舍通知推送</h4>
                        <!-- /.box-title -->
                        <div class="card-content">
                            <ul class="dot-list">
                                <li>
                                    <span class="dorm-news-content">铁二舍将于17日23:00~18日6:00停水，请做好储水准备</span>
                                    <span class="date">通知抵达时间：5月17日下午。</span>
                                </li>
                                <li>
                                    <span class="dorm-news-content">铁二舍将于19日14:00~18:00维修二楼水龙头</span>
                                    <span class="date">通知抵达时间：5月17日下午。</span>
                                </li>
                                <li>
                                    <span class="dorm-news-content">铁二舍、铁三舍公共净化水机将于将于17日23:00~18日6:00进行维修，请做好储水准备</span>
                                    <span class="date">通知抵达时间：5月17日下午。</span>
                                </li>
                            </ul>
                        </div>
                        <!-- /.card-content -->
                    </div>
                    <!-- /.box-content card -->
                </div>
                <div class="col-md-6 col-xs-12 member-tasks">
                    <div class="box-content card">
                        <h4 class="box-title"><i class="fa fa-check ico"></i> 今日任务</h4>
                        <!-- /.box-title -->
                        <div class="card-content">
                            <ul class="dot-list">
                                <li>
                                    <span class="member-tasks-content">软件工程基础课程项目</span>
                                    <span class="date">截止时间：本周五。</span>
                                </li>
                                <li>
                                    <span class="member-tasks-content">架构课实验项目JPetstore</span>
                                    <span class="date">截止时间：12周周末。</span>
                                </li>
                                <li>
                                    <span class="member-tasks-content">计算机网络原理可视化平台作业</span>
                                    <span class="date">截止时间：5月20日下午。</span>
                                </li>
                                <li>
                                    <span class="member-tasks-content">体测 1 KM长跑训练</span>
                                    <span class="date">时长：30min</span>
                                </li>
                            </ul>
                        </div>
                        <!-- /.card-content -->
                    </div>
                    <!-- /.box-content card -->
                </div>
            </div>

        </div>
        <!-- /.row -->

        <footer class="footer">
            <ul class="list-inline">
                <li>Copyright &copy; 2021.SE Master All rights reserved.</li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </footer>
    </div>
    <!-- /.main-content -->
</div>
<!--/#wrapper -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>

<script src="/static/assets/scripts/main.min.js"></script>

<script>
    $(() => {
        $.ajax({
            url: '/weather',
            type: 'GET',
            success: (data) => {
                let date = new Date(),
                    infotr_list = $('#wrapper .member-now-weather tbody');
                $('#wrapper .member-city').text(data[0]["城市"]);
                $('#wrapper .member-temp').text(data[0]["温度"]);
                // if()
                $('#wrapper .member-weather span').text(data[0]["天气"]);
                $('#wrapper .member-weather i').addClass(getWeatherType(data[0]["天气"]));
                $('#wrapper .member-date').text(date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日');
                infotr_list.find('tr:eq(0)').find('td:eq(1)').text(data[0]["空气质量"]);
                infotr_list.find('tr:eq(1)').find('td:eq(1)').text(data[0]["湿度"] + "%");
                infotr_list.find('tr:eq(2)').find('td:eq(1)').text(data[0]["风向"] + '，' + data[0]["风力"]);
            }
        });

        $.ajax({
            url: '/futureWeather',
            type: 'GET',
            success: (futuredata) => {
                let weather_days = $('#wrapper .weather-info .col');

                weather_days.each((index, element) => {
                    $(element).find('.weather-day').text(dateFormat(futuredata[index]["日期"]));
                    $(element).find('.number').text(futuredata[index]["温度"].split('/')[0]);
                    $(element).find('.small_number').text('/' + futuredata[index]["温度"].split('/')[1]);
                    $(element).find('.weather-type').text(futuredata[index]["天气"]);
                    $(element).find('.ico').addClass(getWeatherType(futuredata[index]["天气"]));
                });
            }
        });

        function getWeatherType(weather) {
            if (weather.indexOf('晴') != -1) {
                if (weather === '晴') {
                    return 'icon-sun-filled';
                } else {
                    return 'icon-cloud-sun';
                }
            } else if (weather.indexOf('雨') != -1) {
                if (weather === '小雨') {
                    return 'icon-drizzle';
                } else {
                    return 'icon-rain';
                }
            } else if (weather.indexOf('雪') != -1) {
                return 'icon-cloud-snow';
            } else {
                return 'fa fa-cloud';
            }
        }

        function dateFormat(date) {
            let res = new Date(date);
            return (res.getMonth() + 1) + '月' + res.getDate() + '日';
        }
    });
</script>
</body>
{#python manage.py runserver -h 127.0.0.1 -p 8081#}
</html>